<template>
    <div class="protectlist">
        <div class="protectlist-box">
            <div class="protectlist-title clearfix">
                <ul>
                    <li><a class="current">肉类</a></li>
                    <li><a>果蔬</a></li>
                    <li><a>乳制品</a></li>
                    <li><a>餐饮</a></li>
                </ul>
            </div>
            <div class="protectlist-goods">
                    <ul class="show">
                        <li>
                            <img style="width:100%;height:100%" src="../assets/images/good1.jpg" alt="">
                            <div class="shadow"></div>
                            <div class="price">
                                <p>新鲜牛肉</p>
                                <section>￥：<span>40</span>/斤</section>
                            </div>
                        </li>
                        <li>
                            <img style="width:133%;height:100%" src="../assets/images/good2.jpg" alt="">
                            <div class="shadow"></div>
                            <div class="price">
                                <p>新鲜牛肉</p>
                                <section>￥：<span>40</span>/斤</section>
                            </div>
                        </li>
                        <li>
                            <img style="width:103%;height:100%;" src="../assets/images/good3.jpg" alt="">
                            <div class="shadow"></div>
                            <div class="price">
                                <p>新鲜牛肉</p>
                                <section>￥：<span>40</span>/斤</section>
                            </div>
                        </li>
                        <li>
                            <img style="width:150%;height:100%;margin-left:-25%;" src="../assets/images/good4.jpg" alt="">
                            <div class="shadow"></div>
                            <div class="price">
                                <p>新鲜牛肉</p>
                                <section>￥：<span>40</span>/斤</section>
                            </div>
                        </li>
                        <li>
                            <img style="width:110%;height:100%;" src="../assets/images/good5.jpg" alt="">
                            <div class="shadow"></div>
                            <div class="price">
                                <p>新鲜牛肉</p>
                                <section>￥：<span>40</span>/斤</section>
                            </div>
                        </li>
                        <li>
                            <img style="width:135%;height:100%;" src="../assets/images/good6.jpg" alt="">
                            <div class="shadow"></div>
                            <div class="price">
                                <p>新鲜牛肉</p>
                                <section>￥：<span>40</span>/斤</section>
                            </div>
                        </li>
                        <li>
                            <img style="width:100%;height:100%;" src="../assets/images/good7.jpg" alt="">
                            <div class="shadow"></div>
                            <div class="price">
                                <p>新鲜牛肉</p>
                                <section>￥：<span>40</span>/斤</section>
                            </div>
                        </li>
                        <li>
                            <img style="width:110%;height:100%;" src="../assets/images/good8.jpg" alt="">
                            <div class="shadow"></div>
                            <div class="price">
                                <p>新鲜牛肉</p>
                                <section>￥：<span>40</span>/斤</section>
                            </div>
                        </li>
                    </ul>
                    <ul>
                        <li>
                            <img style="width:100%;height:100%" src="../assets/images/fruit1.jpg" alt="">
                            <div class="shadow"></div>
                            <div class="price">
                                <p>新鲜水果</p>
                                <section>￥：<span>40</span>/斤</section>
                            </div>
                        </li>
                        <li>
                            <img style="width:133%;height:100%" src="../assets/images/fruit2.jpg" alt="">
                            <div class="shadow"></div>
                            <div class="price">
                                <p>新鲜水果</p>
                                <section>￥：<span>40</span>/斤</section>
                            </div>
                        </li>
                        <li>
                            <img style="width:103%;height:100%;" src="../assets/images/fruit3.jpg" alt="">
                            <div class="shadow"></div>
                            <div class="price">
                                <p>新鲜水果</p>
                                <section>￥：<span>40</span>/斤</section>
                            </div>
                        </li>
                        <li>
                            <img style="width:150%;height:100%;margin-left:-25%;" src="../assets/images/fruit4.jpg" alt="">
                            <div class="shadow"></div>
                            <div class="price">
                                <p>新鲜水果</p>
                                <section>￥：<span>40</span>/斤</section>
                            </div>
                        </li>
                        <li>
                            <img style="width:110%;height:100%;" src="../assets/images/fruit5.jpg" alt="">
                            <div class="shadow"></div>
                            <div class="price">
                                <p>新鲜水果</p>
                                <section>￥：<span>40</span>/斤</section>
                            </div>
                        </li>
                        <li>
                            <img style="width:135%;height:100%;" src="../assets/images/fruit6.jpg" alt="">
                            <div class="shadow"></div>
                            <div class="price">
                                <p>新鲜水果</p>
                                <section>￥：<span>40</span>/斤</section>
                            </div>
                        </li>
                        <li>
                            <img style="width:100%;height:100%;" src="../assets/images/fruit7.jpg" alt="">
                            <div class="shadow"></div>
                            <div class="price">
                                <p>新鲜水果</p>
                                <section>￥：<span>40</span>/斤</section>
                            </div>
                        </li>
                        <li>
                            <img style="width:110%;height:100%;" src="../assets/images/fruit8.jpg" alt="">
                            <div class="shadow"></div>
                            <div class="price">
                                <p>新鲜水果</p>
                                <section>￥：<span>40</span>/斤</section>
                            </div>
                        </li>
                    </ul>
                    <ul>
                        <li>
                            <img style="width:100%;height:100%" src="../assets/images/milk1.jpg" alt="">
                            <div class="shadow"></div>
                            <div class="price">
                                <p>新鲜牛奶</p>
                                <section>￥：<span>40</span>/斤</section>
                            </div>
                        </li>
                        <li>
                            <img style="width:133%;height:100%" src="../assets/images/milk2.jpg" alt="">
                            <div class="shadow"></div>
                            <div class="price">
                                <p>新鲜牛奶</p>
                                <section>￥：<span>40</span>/斤</section>
                            </div>
                        </li>
                        <li>
                            <img style="width:103%;height:100%;" src="../assets/images/milk3.jpg" alt="">
                            <div class="shadow"></div>
                            <div class="price">
                                <p>新鲜牛奶</p>
                                <section>￥：<span>40</span>/斤</section>
                            </div>
                        </li>
                        <li>
                            <img style="width:150%;height:100%;margin-left:-25%;" src="../assets/images/milk4.jpg" alt="">
                            <div class="shadow"></div>
                            <div class="price">
                                <p>新鲜牛奶</p>
                                <section>￥：<span>40</span>/斤</section>
                            </div>
                        </li>
                        <li>
                            <img style="width:110%;height:100%;" src="../assets/images/milk5.jpg" alt="">
                            <div class="shadow"></div>
                            <div class="price">
                                <p>新鲜牛奶</p>
                                <section>￥：<span>40</span>/斤</section>
                            </div>
                        </li>
                        <li>
                            <img style="width:135%;height:100%;" src="../assets/images/milk6.jpg" alt="">
                            <div class="shadow"></div>
                            <div class="price">
                                <p>新鲜牛奶</p>
                                <section>￥：<span>40</span>/斤</section>
                            </div>
                        </li>
                        <li>
                            <img style="width:100%;height:100%;" src="../assets/images/milk7.jpg" alt="">
                            <div class="shadow"></div>
                            <div class="price">
                                <p>新鲜牛奶</p>
                                <section>￥：<span>40</span>/斤</section>
                            </div>
                        </li>
                        <li>
                            <img style="width:110%;height:100%;" src="../assets/images/milk8.jpg" alt="">
                            <div class="shadow"></div>
                            <div class="price">
                                <p>新鲜牛奶</p>
                                <section>￥：<span>40</span>/斤</section>
                            </div>
                        </li>
                    </ul>
                    <ul>
                        <li>
                            <img style="width:100%;height:100%" src="../assets/images/food1.jpg" alt="">
                            <div class="shadow"></div>
                            <div class="price">
                                <p>可口的餐饮</p>
                                <section>￥：<span>40</span>/斤</section>
                            </div>
                        </li>
                        <li>
                            <img style="width:133%;height:100%" src="../assets/images/food2.jpg" alt="">
                            <div class="shadow"></div>
                            <div class="price">
                                <p>可口的餐饮</p>
                                <section>￥：<span>40</span>/斤</section>
                            </div>
                        </li>
                        <li>
                            <img style="width:103%;height:100%;" src="../assets/images/food3.jpg" alt="">
                            <div class="shadow"></div>
                            <div class="price">
                                <p>可口的餐饮</p>
                                <section>￥：<span>40</span>/斤</section>
                            </div>
                        </li>
                        <li>
                            <img style="width:150%;height:100%;margin-left:-25%;" src="../assets/images/food4.jpg" alt="">
                            <div class="shadow"></div>
                            <div class="price">
                                <p>可口的餐饮</p>
                                <section>￥：<span>40</span>/斤</section>
                            </div>
                        </li>
                        <li>
                            <img style="width:110%;height:100%;" src="../assets/images/food5.jpg" alt="">
                            <div class="shadow"></div>
                            <div class="price">
                                <p>可口的餐饮</p>
                                <section>￥：<span>40</span>/斤</section>
                            </div>
                        </li>
                        <li>
                            <img style="width:135%;height:100%;" src="../assets/images/food6.jpg" alt="">
                            <div class="shadow"></div>
                            <div class="price">
                                <p>可口的餐饮</p>
                                <section>￥：<span>40</span>/斤</section>
                            </div>
                        </li>
                        <li>
                            <img style="width:100%;height:100%;" src="../assets/images/food7.jpg" alt="">
                            <div class="shadow"></div>
                            <div class="price">
                                <p>可口的餐饮</p>
                                <section>￥：<span>40</span>/斤</section>
                            </div>
                        </li>
                        <li>
                            <img style="width:110%;height:100%;" src="../assets/images/food8.jpg" alt="">
                            <div class="shadow"></div>
                            <div class="price">
                                <p>可口的餐饮</p>
                                <section>￥：<span>40</span>/斤</section>
                            </div>
                        </li>
                    </ul>
            </div>
        </div>
    </div>
</template>

<script>
    import $ from 'jquery'
    export default {
        data(){
            return{
                lists:['肉类','果蔬','乳制品','餐饮']
            }
        },
        mounted(){
            var imgs = $('.protectlist-goods ul');
            var lists = $('.protectlist-title ul li');
            var a = $('.protectlist-title ul li a');
            function show(index){
               for (var i = 0; i < imgs.length; i++) {
                var style = (i == index ? 'show' : '');
                var style2 = (i == index ? 'current' : '');
                $(imgs[i]).attr('class',style);
                $(lists[i]).attr('class',style);
                $(a[i]).attr('class',style2);
               }
             }
                var index = 0;
                lists.each(function (i,v){
                    $(v).on('click',function (){
                        show(i);
                    })
                    $(v).on('click',function (){
                        index = i;
                    })
                })
            }
    }
</script>

<style scoped>
ul{margin:0;padding: 0;}
li{list-style: none;}
a{text-decoration: none;}
p{font-size: 18px;}
section{font-size: 14px;}
span{font-size: 25px;color: rgb(204, 2, 2);}
.underline{
    border-bottom: 2px solid;
}
    .protectlist-box{
        width:1200px;
        margin:50px auto;
        color: black;
    }
    .protectlist-title{
        width: 284px;
        margin: 0 auto;
    }
    .protectlist-title ul li{
        float: left;
    }
    .protectlist-title ul li a{
        color: gray;
        font-size: 14px;
        padding: 10px 16px;
        transition: all .5s;
        cursor: pointer;
    }
    .protectlist-title ul li a.current{
        color: black;
    }
    
    .protectlist-title ul li a:hover{
        color: black;
    }
    .protectlist-goods{
        position: relative;
        height: 800px;
        overflow: hidden;
    }
    .protectlist-goods ul{
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        margin: 25px auto;
        position: absolute;

        visibility: hidden;
        transition: opacity 1s ease;
    }
    .protectlist-goods ul.show{
       visibility: visible;
}
    .protectlist-goods ul li{
        position: relative;
        width: 276px;
        height: 366px;
        box-shadow: rgba(0,0,0,.1) 0px 2px 20px;
        border-radius: 8px;
        overflow: hidden;
        margin: 15px 0;
        cursor: pointer;
        transition: all .6s;
    }
    .protectlist-goods ul li:hover .shadow{
        background: #fff;
        opacity: 0.6;
    }
    .protectlist-goods ul li:hover{
        transform: translateY(-20px);
        
    }
    .protectlist-goods ul li:hover .price{
        visibility: visible;
        animation-duration: 1s;
        animation-delay: 0;
        animation-iteration-count:1;
        animation-name: bounceInLeft;
    }
    .protectlist-goods ul li .shadow{
        position: absolute;
        bottom: 0%;
        width: 276px;
        height: 366px;
        transition: all .8s;
    }
    .protectlist-goods ul li .price{
        position: absolute;
        bottom: 0%;
        width: 276px;
        height: 366px;
    }
    .protectlist-goods ul li .price{
        text-align: center;
        top: 35%;
        visibility: hidden;
    }
    
    

 .clearfix:after {
    content: " ";
    display: block;
    clear: both;
    height: 0;
  }
  .clearfix {
    zoom: 1;
  }

   
</style>